<template>
	<view class="box">
		<!-- 导航栏 -->
		<navBar title='我的' :isSlot="true" :isNav="false"></navBar>

		<view class="InformationBox">
			<!-- 头像区域 -->
			<view class="userInformation">
				<view class="userInformationLeftImg" @click="toSet">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="userInformationRightText">
					<text>昵称：{{userInfo.name}}</text>
					<text>账号：{{userInfo.phone}}</text>
				</view>
			</view>

			<!-- 个性签名 -->
			<view class="signature" @click="toSet">
				<text>个性签名：{{userInfo.desc}}</text>
			</view>

			<!-- 选项区域 -->
			<view class="option">
					<u-cell @click='toMyBlog' iconStyle="color:#ffb19f" rightIconStyle="color:#ffb19f;fontWeight:bold;" size="large"
						icon="order" title="我的博客" :isLink="true" arrow-direction="right" :border='false'
						titleStyle="fontSize:18px"></u-cell>
					<u-cell @click="toFollow" iconStyle="color:#ffb19f" rightIconStyle="color:#ffb19f;fontWeight:bold;" size="large"
						icon="star" title="我的关注" :isLink="true" arrow-direction="right" :border='false'
						titleStyle="fontSize:18px"></u-cell>
					<u-cell @click="toAgreeWith" iconStyle="color:#ffb19f" rightIconStyle="color:#ffb19f;fontWeight:bold;" size="large"
						icon="thumb-up" title="我赞过的" :isLink="true" arrow-direction="right" :border='false'
						titleStyle="fontSize:18px"></u-cell>
			</view>

			<!-- 设置个人信息 -->
			<view class="setInformation">
				<u-cell-group :border='false'>
					<u-cell @click="toSet" iconStyle="color:#ffb19f" rightIconStyle="color:#ffb19f;fontWeight:bold;" size="large"
						icon="setting" title="修改个人信息" :isLink="true" arrow-direction="right" :border='false'
						titleStyle="fontSize:18px"></u-cell>
				</u-cell-group>
			</view>

			<u-button @click="out" type="primary" text="退出登录" class="logOutBtn"></u-button>
		</view>
		<!-- 		<u-cell class="myInformation">
		</u-cell> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {

			}
		},
		onLoad() {
			//	如果用户没有登陆，则跳转到登陆页
			if (!this.userInfo) {
				uni.redirectTo({
					url: '/subpages/login/login'
				})
			}
		},
		onShow(){
			// 显示TabBar
			uni.showTabBar()
		},
		methods: {
			toMyBlog(){
				uni.navigateTo({
					url:"/subpages/myBlog/myBlog"
				})
			},
			toFollow(){
				uni.navigateTo({
					url:"/subpages/toFollow/toFollow"
				})
			},
			toAgreeWith(){
				uni.navigateTo({
					url:"/subpages/agreeWith/agreeWith"
				})
			},
			toSet(){
				uni.navigateTo({
					url:"/subpages/set/set"
				})
			},
			out(){
				uni.removeStorageSync('userInfo');
				uni.redirectTo({
					url: '/subpages/login/login'
				})
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		padding: 2vw;
		box-sizing: border-box;
		background-color: #f5f5f5;

		.InformationBox {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 70vh;


			.userInformation {
				width: 100%;
				height: 15vh;
				background-color: #fff;
				border-radius: 10px;
				display: flex;
				align-items: center;
				padding-left: 3vw;
				box-sizing: border-box;

				.userInformationLeftImg {
					image{
						width: 13vh;
						height: 13vh;
						border-radius: 50%;
					}
				}

				.userInformationRightText {
					padding-left: 3vw;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 8vh;
				}
			}

			.signature {
				display: flex;
				align-items: center;
				width: 100%;
				height: 10vh;
				background-color: #fff;
				border-radius: 10px;
				padding-left: 3vw;
				box-sizing: border-box;
				margin-top: 3vw;
			}

			.option {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				border-radius: 10px;
				padding:0 3vw;
				box-sizing: border-box;
				margin-top: 3vw;
				width: 100%;
				background-color: #fff;
				box-sizing: border-box;
				height: 25vh;
			}

			.setInformation {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border-radius: 10px;
				padding:0 3vw;
				box-sizing: border-box;
				margin-top: 3vw;
				width: 100%;
				background-color: #fff;
				box-sizing: border-box;
				height: 10vh;
			}

			.logOutBtn {
				margin-top: 3vw;
				border-radius: 10px;
				background: linear-gradient(to right, #d1c2d3, #ffb5cb, #ffb091);
				border: none;
				font-weight: bold;
			}
		}

		// .myInformation{
		// 	background-color: pink;
		// 	border-radius: 10px;
		// 	margin-top: 10vw;
		// }
	}

	// ::v-deep .u-cell-group__wrapper:first-child {
	// 	height: 25vh;
	// 	justify-content: space-evenly;
	// }

::v-deep .u-cell__body{
	width: 100vw;
}

	/*	#ifdef MP-WEIXIN */
	::v-deep .u-button--square.data-v-2bf0e569 {
		margin-top: 20px;
		border-radius: 10px;
		background: linear-gradient(to right, #d1c2d3, #ffb5cb, #ffb091);
		border: none;
	}

	/* #endif */
	// ::v-deep .u-cell__body{
	// 	height: 15vh;
	// }
</style>
